<template>
  <el-form
    ref="form"
    :model="formData"
    :rules="rules"
    label-width="80px"
    :size="formItemSize"
    label-position="right"
    @submit.prevent
  >
    <el-row :gutter="20" class="full-width-input">
      <el-col :span="24">
        <!-- 1. 用户名称（不可编辑，仅展示） -->
        <el-form-item label="用户名称" prop="showName">
          <el-input
            v-model="formData.showName"
            placeholder="用户名"
            :disabled="true"  
            maxlength="30"
          />
        </el-form-item>

        <!-- 2. 新密码 -->
        <el-form-item label="新密码" prop="password">
          <el-input
            v-model="formData.password"
            type="password"
            placeholder="请输入新密码"
            clearable
            maxlength="64"
          />
        </el-form-item>

        <!-- 3. 确认密码 -->
        <el-form-item label="确认密码" prop="passwordRepeat">
          <el-input
            v-model="formData.passwordRepeat"
            type="password"
            placeholder="请再次输入新密码"
            clearable
            maxlength="64"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 底部按钮栏（保留取消/确定） -->
    <el-row type="flex" justify="end" class="dialog-btn-layer">
      <el-button :plain="true" @click="onCancel">取消</el-button>
      <el-button
        type="primary"
        @click="onSubmit"
        :disabled="!checkPermCodeExist('formSysUser:fragmentSysUser:update')"
      >
        确定修改
      </el-button>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { Ref, computed, inject, onMounted, reactive, ref } from 'vue';
import { CascaderValue, ElCascader, ElMessage } from 'element-plus';
import { SysUserStatus, SysUserType } from '@/common/staticDict/index';
import { findTreeNodePath } from '@/common/utils';
import { DialogProp } from '@/components/Dialog/types';
import { usePermissions } from '@/common/hooks/usePermission';
import {
  DictionaryController,
  SysDeptController,
  SystemUserController,
  SysDataPermController,
  SystemRoleController,
} from '@/api/system';
import { ANY_OBJECT } from '@/types/generic';
import { User } from '@/types/upms/user';
import { useDropdown } from '@/common/hooks/useDropdown';
import { DropdownOptions, ListData } from '@/common/types/list';
import { useLayoutStore } from '@/store';
const layoutStore = useLayoutStore();

// 1. Props定义（仅保留必要的行数据和弹窗回调）
const props = defineProps<{
  rowData?: User;  // 接收当前用户信息（用于展示用户名和传userId）
  dialog?: DialogProp<ANY_OBJECT>;  // 弹窗回调
}>();

// 2. 基础配置（复用表单尺寸、权限校验）
const formItemSize = computed(() => {
  return layoutStore.defaultFormItemSize;
});
const { checkPermCodeExist } = usePermissions();

// 3. 表单核心数据（仅保留用户名称、密码、确认密码）
const form = ref();
const formData: Ref<{
  userId?: string | number;  // 隐藏字段，用于传用户ID
  showName: string;          // 用户名（展示用）
  password: string;          // 新密码
  passwordRepeat: string;    // 确认密码
}> = ref({
  showName: '',
  password: '',
  passwordRepeat: ''
});

// 4. 表单验证规则（强化密码校验）
const validatePasswordRepeat = (
  rule: ANY_OBJECT,
  value: string,
  callback: (error?: Error) => void,
) => {
  // 先校验新密码是否已输入
  if (!formData.value.password) {
    callback(new Error('请先输入新密码'));
  }
  // 再校验两次密码一致性
  else if (!value) {
    callback(new Error('确认密码不能为空'));
  } else if (value !== formData.value.password) {
    callback(new Error('两次密码输入不一致，请重新输入'));
  } else {
    callback();
  }
};
const rules = ref({
  showName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],  // 确保用户名展示
  password: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },  // 新增密码长度校验
    { max: 64, message: '密码长度不能超过64位', trigger: 'blur' }
  ],
  passwordRepeat: [
    { validator: validatePasswordRepeat, trigger: 'blur' }  // 复用确认密码校验
  ]
});

// 5. 取消按钮逻辑（不变）
const onCancel = () => {
  if (props.dialog) {
    props.dialog.cancel();
  }
};

// 6. 提交逻辑（修改为“密码修改”接口）
const onSubmit = () => {
  form.value.validate((valid: boolean) => {
    if (valid) {
      // 构造密码修改接口参数（按后端实际需求调整字段名）
      const params = {
        userId: formData.value.userId,  // 目标用户ID
        newPassword: formData.value.password  // 新密码
      };

      // 调用密码修改接口（替换原有新增/编辑逻辑）
      SystemUserController.resetUserPassword(params)  // 假设接口为resetUserPassword，需按实际接口名调整
        .then(res => {
          ElMessage.success('密码修改成功！');
          props.dialog?.submit(res);  // 关闭弹窗并回调
        })
        .catch(e => {
          console.warn('密码修改失败:', e);
          ElMessage.error('密码修改失败，请重试');
        });
    }
  });
};

// 7. 初始化（从rowData加载用户信息）
onMounted(() => {
  if (props.rowData) {
    // 从传入的用户数据中提取必要字段
    formData.value = {
      userId: props.rowData.userId,  // 隐藏存储用户ID
      showName: props.rowData.showName || '',  // 展示用户名
      password: '',  // 密码初始为空
      passwordRepeat: ''
    };
  }
});
</script>